<template>
  <view class="video-wrapper">
    <view class="video-label">
      <template v-if="isSumVideo">
        知识合集来咯，请观看总结视频
      </template>
      <template v-else>
        请观看讲解视频后，再进行口语练习
      </template>
    </view>

    <view class="video-player">
      <CustomVideo @error="videoPlayError" @ended="videoPlayEnd" :src="`${env.prefixUrl}${props.video}`" />
    </view>

    <button class="video-button" @click="handleToNext">
      <template v-if="isSumVideo">
        查看小结
      </template>
      <template v-else>
        前往练习
      </template>
      <image class="video-button-right" src="https://rwstatic.tentons.cn/web/Lesson/images/button-right-icon.png" />
    </button>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import env from "@/config/env";
import { util } from "@/utils/util";
import API from "@/api";
import CustomVideo from '@/components/customVideo.vue';

interface IProps {
  video: string;
  video_process: number;
  part_id: number;
  session_id: string;
}

const props = withDefaults(defineProps<IProps>(), {
  video: "",
});

const emits = defineEmits<{
  (e: "video-next", payload: any): void;
}>();

const isPlayEnd = ref(false);
const videoProcess = ref(0);

watch(() => props.video_process, (val) => {
  videoProcess.value = Number(val);
}, {
  immediate: true,
})

const isSumVideo = computed(() => {
  return props.part_id == 0;
})

const videoPlayEnd = async () => {
  if (videoProcess.value === 0) {
    videoProcess.value += 1;

    await API.skillNodeReport({
      session_id: props.session_id,
      video_process: `${props.part_id}=${videoProcess.value}`,
    });

    emits("video-next", {
      process: videoProcess.value,
      isSumVideo: false,
    });
  }

  isPlayEnd.value = true;
}

const videoPlayError = () => {
  util.showDialogue("视频播放出错");
}

const handleToNext = async () => {
  if (videoProcess.value === 0 && !isPlayEnd.value) {
    return util.showDialogue("请先观看完视频");
  }

  if (videoProcess.value === 1) {
    videoProcess.value += 1;

    await API.skillNodeReport({
      session_id: props.session_id,
      video_process: `${props.part_id}=${videoProcess.value}`,
    });
  }

  emits("video-next", {
    process: videoProcess.value,
    isSumVideo: props.part_id == 0 && videoProcess.value == 2,
  });
}
</script>

<style scoped lang="scss">
.video-wrapper {
  width: 100%;

  .video-label {
    margin-left: 2rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .video-player {
    width: 34.3rem;
    height: 19.5rem;
    margin: 0 auto;
  }

  .video-button {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31.5rem;
    height: 5rem;
    margin: 0;
    border-radius: 1rem;
    color: $uni-text-color;
    font-family: xiaolai;
    font-size: 1.7rem;
    border: 2px solid $uni-btn-border;
    background-color: $uni-btn-prime;

    .video-button-right {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
  }
}
</style>